<!-- 搜索查询 -->
<template>
	<div>
		<Form ref="search" class="search-box" :rules="validFunc" :model="search">
			<FormItem class="input" prop="searchText">
				<Input type="text" v-model="search.searchText" size="large" autofocus placeholder="设备编号/运单号">
				<Select v-model="queryType" slot="prepend" style="width: 80px">
					<Option value="deviceID">设备Id</Option>
					<Option value="orderID">订单号</Option>
				</Select>
				</Input>
			</FormItem>
			<FormItem class="button">
				<Button type="primary" size="large" icon="ios-search" @click="searchSubmit('search')">{{ searchBtnMsg
				}}</Button>
			</FormItem>
		</Form>
	</div>
</template>

<script>
import { bus } from '../assets/utitls/bus'
import '../assets/utitls/datas'
import moment from 'moment'
moment.locale('zh-cn')
export default {
	data() {
		// 验证用户输入
		const validateSearchText = (rule, value, callback) => {
			let reSearch = /^[a-zA-Z\d]+$/
			if (!value) {
				callback(new Error('请输入设备id或运单'))
			}
			setTimeout(() => {
				if (!reSearch.test(value)) {
					callback(new Error('设备id或运单由数字或字母组成！'))
				} else {
					callback()
				}
			}, 500)
		}
		return {
			searchBtnMsg: '查询', // 查询按钮
			queryType: 'deviceID', // 默认查询类型
			search: {
				searchText: '', // 查询输入框内容
			},
			validFunc: {
				searchText: [
					{ validator: validateSearchText, trigger: 'blur' }
				]
			},
			time: moment().format('YYYY-MM-DD h:mm:ss'),
			// 服务器返回的
			returnQuery: []
		}
	},
	computed: {
		screen() {
			return this.$store.state.screenWidth
		},
		list() {
			return this.$store.state.resData
		}
	},
	created() {
		// 查询按钮文字
		this.btnText(this.screen)
	},
	methods: {
		// 设置按钮文字
		btnText(screen) {
			if (screen > 525) {
				this.searchBtnMsg = '查询'
			} else {
				this.searchBtnMsg = ''
			}
		},
		// 查询
		get(data) {
			this.$http.post('/query', data).then(res => {
				let length = res.data.data.length
				if (length !== 0) {
					// 请求成功
					this.returnQuery = res.data.data
					this.$store.commit('RES_DATA', { data: res.data.data })
					// 跳转页面
					// this.$router.push({
					//     path: '/device'
					// })
				} else {
					// 请求失败,提示信息
					this.$Message.error('查询数据失败！')
					this.search.searchText = ''
				}
			})
		},
		// 查询条件
		query(device, order, num) {
			// let nowTime = // 格式化当前时间
			let data = {
				'ordersAirWayBillNo': order,
				'serialId': device,
				'query_type': num,
				'startTime': '2000-01-01 01:30:10',
				'endTime': this.time,
			}
			// 判断列表中是否已经有了要查询的id
			let arr = []
			for (let i in this.list) {
				arr.push(this.list[i].serialId)
			}
			let cace = arr.indexOf(data.serialId)
			if (cace === -1) {
				this.get(data)
			} else {
				this.$Message.error('结果中已有此数据！')
			}

		},
		// 设备Id查询
		queryDevice() {
			this.query(this.search.searchText, '', 4)
		},
		// 订单查询
		queryOrder() {
			this.query('', this.search.searchText, 3)
		},
		// 查询提交
		searchSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					// 设备id查询
					if (this.queryType === 'deviceID') {
						this.queryDevice()
					}
					// 订单查询
					if (this.queryType === 'orderID') {
						this.queryOrder()
					}

				} else {
					this.$Message.error('请输入正确的设备id或运单！')
				}
			})
		}
	},
	watch: {
		// 监听结果
		'returnQuery': {
			immediate: true,
			handler: (val) => {
				bus.$emit('registerResult', val)
			}
		},
		// 监听查询方式
		'queryType': {
			immediate: true,
			handler: (val) => {

			}
		}
	}
}
</script>

<style lang="less" scoped>
.search-box {
	margin-top: 30px;
	.clear-fix;

	.input,
	.button {
		margin: 0;
		float: left;
	}

	.input /deep/ {
		width: 80%;

		.ivu-input {
			border-radius: 4px 0 0 4px;
		}
	}

	.button /deep/ {
		width: 20%;

		.ivu-btn {
			border-radius: 0 4px 4px 0;
			width: 100%;
		}
	}
}
</style>
